<template>
    <el-container style="width: 1200px;margin: 0 auto">
        <el-header height="265px" style="background-color: white">
          <div style="width: 100%;margin: 0 auto">
            <el-row :gutter="20">
              <el-col :span="24">
                <img src="/imgs/img.png" width="1200" height="200">
              </el-col>
              <el-col :span="18">
                <el-menu mode="horizontal" router active-text-color="orange">
                  <el-menu-item index="/">首页</el-menu-item>
                  <el-menu-item index="/list?type=1"><el-icon><Smoking /></el-icon>动态</el-menu-item>
                  <el-menu-item index="/list?type=2"><el-icon><DocumentAdd /></el-icon>投稿</el-menu-item>
                  <el-menu-item index="/collect/video"><el-icon><Collection /></el-icon>合集和列表</el-menu-item>
                  <el-menu-item index="/collect/favlist"><el-icon><StarFilled /></el-icon>收藏</el-menu-item>
                  <el-menu-item index="/list?type=3"><el-icon><Apple /></el-icon>订阅</el-menu-item>
                  <el-menu-item index="/list?type=3"><el-icon><Setting /></el-icon>设置</el-menu-item>
                </el-menu>
              </el-col>
              <el-col :span="4">
                <el-input style="position: relative" v-model="wd"
                          placeholder="请输入搜索的关键字">
                  <template #append>
                    <el-button :icon="Search" @click="search()"/>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-popover v-if="user==null"
                            placement="top-start"
                            title="欢迎来到OSS社区!"
                            :width="200"
                            trigger="hover"
                >
                  <template #reference>
                    <el-icon style="position: relative;top: 15px" :size="30">
                      <User/>
                    </el-icon>
                  </template>
                  <el-button type="info" @click="router.push('/reg')">注册</el-button>
                  <el-button type="warning" @click="router.push('/login')">登录</el-button>
                </el-popover>
                <el-popover v-else
                            placement="top-start"
                            title="欢迎来到OSS社区!"
                            :width="200"
                            trigger="hover"
                >
                  <template #reference>
                    <el-icon style="position: relative;top: 15px" :size="30">
                      <User/>
                    </el-icon>
                  </template>
                  <!--     显示头像的组件   http://localhost:8080/2023/10/19/xxx.jpg      -->
                  <div style="text-align: center">
                    <el-avatar :src="user.avatar"></el-avatar><br>
                    <el-button type="info" size="small" @click="router.push('/personal')">个人中心</el-button>
                    <el-button type="warning" size="small" @click="logout()">退出登录</el-button>
                    <el-button v-if="user.isAdmin==1" size="small"
                               type="danger" @click="router.push('/admin')">后台管理页面
                    </el-button>
                  </div>

                </el-popover>
              </el-col>
            </el-row>
          </div>
        </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
</template>
<script setup>
import router from "@/router";
import {ref} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'

const user = ref(getUser());
const wd = ref('');
const search=()=>{
  //跳转到列表页面
  router.push('/list?wd='+wd.value);

}

</script>

<style scoped>

</style>

